<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="msapplication-tap-highlight" content="no" />

    <title>jQM theme for Windows Phone</title>

    <link rel="stylesheet" href="css/wp/jquery.mobile.wp.theme.css" />

    <link href="css/progress-bar.css" rel="stylesheet" type="text/css" />
    <link href="css/toggle-button.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        /* custom icons for toggle button*/
        .ui-icon-demo-help,
        .ui-icon-demo-set {
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: 30px 30px;
        }

        .ui-toggle-button-a .ui-icon-demo-set,
        .ui-toggle-button-b[checked='checked'] .ui-icon-demo-set {
            /*background-image: url(Images/set.dark.png) ;*/
            background-image: url();
        }

        .ui-toggle-button-b .ui-icon-demo-set,
        .ui-toggle-button-a[checked='checked'] .ui-icon-demo-set {
            /*background-image: url(Images/set.light.png);*/
            background-image: url();
        }
    </style>

    <script type="text/javascript" src="js/modernizr/modernizr.js"></script> 

    <script src="css/wp/jquery.mobile.wp.theme.init.js" type="text/javascript"></script>
    <script src="js/jquery.globalstylesheet.js" type="text/javascript"></script>
    <script src="js/jquery.mobile.themeswitcher.js" type="text/javascript"></script>

    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
    <!--<script src="js/jquery.mobile-1.2.1.min.js" type="text/javascript"></script>-->

    <script src="js/progress-bar.js" type="text/javascript"></script>
    <script src="js/toggle-button.js" type="text/javascript"></script>

    <script src="js/code/dreamboxResponse.js" type="text/javascript"></script>
    <script src="js/code/RemoteControl.js" type="text/javascript"></script>
    <script src="js/code/uri.js" type="text/javascript"></script>


</head>
<body>    

    <div data-role="page" id="bouquets">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>
        </div>
        <!-- /header -->

        <div data-role="content">
            <ul id="bouquetsList" name="list-view-1" data-role="listview" data-inset="true" />
        </div>
        <!-- /content -->

        <div data-role="footer" data-theme="d">
            <h4>bouquets</h4>
        </div>
        <!-- /footer -->
    </div>

    <!-- Start of page: #remotecontrol -->
    <div data-role="page" id="remotecontrol">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>
        </div>
        <!-- /header -->

        <div data-role="content">            
            <ul data-role="listview" data-inset="true" data-divider-theme="d">
                <li data-role="list-divider">Remote Control</li>
            </ul>
            <a data-role="button" id="rcPower" data-transition="flip">power</a>
            <div>
                <div style="float: left; margin-top: 17px; margin-right: 4px;">
                    <label for="number-1">Channel:</label></div>
                <div style="float: left; width: 23.5%; margin-top: 8px; margin-right: 5px;">
                    <input name="number-1" style="padding: 1px 3px 1px 5px; font-size: 18px; font-weight: bold;" id="number-1" type="number" value="" data-clear-btn="false"></div>
                <div style="float: right; width: 48%"><a data-role="button" id="rcOKcnl" data-transition="flip">ok</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; margin-top: 20px; margin-right: 13px;">
                    <label>Volume:</label></div>
                <div style="float: left; margin-right: 2px;"><a data-role="button" id="rcVolumeUp" style="width: 68px" data-transition="flip">+</a></div>
                <div style="float: left;"><a data-role="button" id="rcVolumeDown" style="width: 68px" data-transition="flip">-</a></div>
                <div style="float: right;"><a data-role="button" id="rcMute" style="width: 70px" data-transition="flip">mute</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; width: 49.4%;"><a data-role="button" style="margin-bottom: 1px" id="rcInfo" data-transition="flip">info</a></div>
                <div style="float: right; width: 49.4%;"><a data-role="button" style="margin-bottom: 1px" id="rcDream" data-transition="flip">dream</a></div>
                <div style="clear: both"></div>
                <div style="float: left; width: 49.4%;"><a data-role="button" style="margin-top: 1px" id="rcAudio" data-transition="flip">audio</a></div>
                <div style="float: right; width: 49.4%;"><a data-role="button" style="margin-top: 1px" id="rcVideo" data-transition="flip">video</a></div>
                <div style="clear: both"></div>
            </div>
            <div id="media">
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcTV" data-transition="flip">tv</a></div>
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcRadio" data-transition="flip">radio</a></div>
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcText" data-transition="flip">text</a></div>
                <div style="float: left; width: 24.45%;"><a data-role="button" id="rcHelp" data-transition="flip">help</a></div>
                <div style="clear: both"></div>
            </div>
            <div id="navigation">
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcNavUp" data-transition="flip">up</a></div>
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcNavDown" data-transition="flip">down</a></div>
                <div style="float: left; width: 24.45%;"><a data-role="button" id="rcNavLeft" data-transition="flip">left</a></div>
                <div style="float: right; width: 24.45%"><a data-role="button" id="rcNavRight" data-transition="flip">right</a></div>
                <div style="clear: both"></div>
            </div>
            <div id="colors">
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcRed" style="background-color: darkred" data-transition="flip">red</a></div>
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcGreen" style="background-color: darkgreen" data-transition="flip">green</a></div>
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcYellow" style="background-color: #e1bf00" data-transition="flip">yellow</a></div>
                <div style="float: left; width: 24.45%;"><a data-role="button" id="rcBlue" style="background-color: #001d8d" data-transition="flip">blue</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; width: 49.5%"><a data-role="button" id="rcCancel" style="background-color: #fff; color: #000; border-color: #fff" data-transition="flip">cancel</a></div>
                <div style="float: right; width: 49.5%"><a data-role="button" id="rcOK" style="background-color: #fff; color: #000; border-color: #fff" data-transition="flip">ok</a></div>
                <div style="clear: both"></div>
            </div>

            <label>Pad</label>
            <hr />
            <div>
                <div style="float: left; width: 33.3%;"><a data-role="button" id="rcOne" style="padding: 10px; margin: 2px;" data-transition="flip">1</a></div>
                <div style="float: left; width: 33.4%;"><a data-role="button" id="rcTwo" style="padding: 10px; margin: 2px;" data-transition="flip">2</a></div>
                <div style="float: left; width: 33.3%"><a data-role="button" id="rcThree" style="padding: 10px; margin: 2px;" data-transition="flip">3</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; width: 33.3%;"><a data-role="button" id="rcFour" style="padding: 10px; margin: 2px;" data-transition="flip">4</a></div>
                <div style="float: left; width: 33.4%;"><a data-role="button" id="rcFive" style="padding: 10px; margin: 2px;" data-transition="flip">5</a></div>
                <div style="float: left; width: 33.3%"><a data-role="button" id="rcSix" style="padding: 10px; margin: 2px;" data-transition="flip">6</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; width: 33.3%;"><a data-role="button" id="rcSeven" style="padding: 10px; margin: 2px;" data-transition="flip">7</a></div>
                <div style="float: left; width: 33.4%;"><a data-role="button" id="rcEight" style="padding: 10px; margin: 2px;" data-transition="flip">8</a></div>
                <div style="float: left; width: 33.3%"><a data-role="button" id="rcNine" style="padding: 10px; margin: 2px;" data-transition="flip">9</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; width: 33.3%;"><a data-role="button" id="A2" style="background-color: #fff; color: #000; border-color: #fff; padding: 10px; margin: 2px;" data-transition="flip">&nbsp;</a></div>
                <div style="float: left; width: 33.4%;"><a data-role="button" id="rcZero" style="padding: 10px; margin: 2px;" data-transition="flip">0</a></div>
                <div style="float: left; width: 33.3%"><a data-role="button" id="A4" style="background-color: #fff; color: #000; border-color: #fff; padding: 10px; margin: 2px;" data-transition="flip">&nbsp;</a></div>
                <div style="clear: both"></div>
            </div>
        </div>
        <!-- /content -->
        <div data-role="footer" data-theme="d">
            <h4>control</h4>
        </div>
        <!-- /footer -->
    </div>

    <div data-role="page" id="channels">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>

        </div>
        <!-- /header -->

        <div data-role="content" data-theme="a">
            <a data-role="button" id="viewEPG" data-transition="flip">epg for current channel</a>
            <!--<div class="content-primary">-->
            <ul id="chnlList" name="list-view-1" data-role="listview" data-inset="true" />
            <!--</div>-->
            <!--/content-primary -->

        </div>
        <!-- /content -->
        <div data-role="footer" data-theme="d">
            <h4>channels</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page -->

    <!-- Start of page: #epg -->
    <div data-role="page" id="epg">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>
        </div>
        <!-- /header -->

        <div data-role="content" >			
		<div id="epgContent"></div>

	</div><!-- /content -->

        <div data-role="footer" data-theme="d">
            <h4>epg</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page one -->

    <!-- Start of page: #settings -->
    <div data-role="page" id="settings">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>

        </div>
        <!-- /header -->

        <div data-role="content" >
            <ul data-role="listview" data-inset="true">
            <li><a href="#profiles">
                <h2>Profile 1</h2>
                <p>IP 192.168.2.7</p></a>
            </li>
            <li><a href="#profiles">
                <h2>Warning</h2>
                <p>IP 192.168.2.2</p></a>
            </li>
            <li><a href="#profiles">
                <h2>Wolfgang Amadeus Phoenix</h2>
                <p>IP 10.10.0.100</p></a>
            </li>
        </ul>
		
	</div><!-- /content -->

        <div data-role="footer" data-theme="d">
            <h4>settings</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page settings -->

    <!-- Start of page: #profiles -->
    <div data-role="page" id="profiles">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>

        </div>
        <!-- /header -->

        <div data-role="content" >
		<label for="number-pattern">Receiver name:</label>
        <input name="text-7" id="text-7" value="" style="font-size:small" placeholder="Unique receiver name (max 20)" type="text">
        <label for="number-pattern">Host:</label>
        <input name="text-7" id="text1" value="" style="font-size:small" placeholder="Web interface url. e.g. 192.168.0.1" type="text">
        <label for="number-pattern">User:</label>
        <input name="text-7" id="text2" value="" style="font-size:small" placeholder="Only if a user is required. Leave blank if you are not sure" type="text">
        <label for="number-pattern">Password:</label>
        <input name="text-7" id="text3" value="" style="font-size:small" placeholder="Only if a password is required. Leave blank if you are not sure" type="text">        
		<label for="number-pattern">Port:</label>
        <input name="text-7" id="text4" value="" style="font-size:small" placeholder="Port. e.g. 1234" type="text">
        <label for="number-pattern">Parameters:</label>
        <input name="text-7" id="text5" value="" style="font-size:small" placeholder="Additional params split by (;). -movieStreamPort 31339; -channelStreamPort 31342" type="text">
        <input name="checkbox-h-6a" id="checkbox-h-6a" type="checkbox">
        <label for="checkbox-h-6a">SSL</label>


	</div><!-- /content -->

        <div data-role="footer" data-theme="d">
            <h4>settings</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page profiles -->
    <!-- Start of page: #about -->
    <div data-role="page" id="about">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>

        </div>
        <!-- /header -->

        <div data-role="content" >			
		    <div>Dream Control app offers a very simple and clear interface to control your decoder. Currently it can be integrated with any decoder with the enigma os.</div>
            <p></p>
            <div>Before using the application please read the privacy policy below:</div>
            <div><a href="#">Privacy Policy</a></div>

	</div><!-- /content -->

        <div data-role="footer" data-theme="d">
            <h4>about</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page about -->
</body>
</html>
